<template>
	<view class="page">
		<!-- <view class="head-back">
			<view class="back" @click="onBack">
				<text></text>
			</view>
			<view class="title">
				<text>我的订单</text>
			</view>
			<view class="more-icon">
				<view class="icon-list">
					<text class="iconfont icon-fadajing"></text>
				</view>
			</view>
		</view> -->
		<!-- 订单tab -->
		<view class="order-tab">
			<view class="tab" :class="{'action':OrderType==0}" @click="onOrderTab(0)">
				<text>全部</text>
				<text class="line"></text>
			</view>
			<view class="tab" :class="{'action':OrderType==1}" @click="onOrderTab(1)">
				<text>待付款</text>
				<text class="line"></text>
			</view>
			<view class="tab" :class="{'action':OrderType==2}" @click="onOrderTab(2)">
				<text>待配送</text>
				<text class="line"></text>
			</view>
			<view class="tab" :class="{'action':OrderType==3}" @click="onOrderTab(3)">
				<text>待提货</text>
				<text class="line"></text>
			</view>
			<view class="tab" :class="{'action':OrderType==4}" @click="onOrderTab(4)">
				<text>已提货</text>
				<text class="line"></text>
			</view>
			<view class="tab" :class="{'action':OrderType==5}" @click="onOrderTab(5)">
				<text>售后服务</text>
				<text class="line"></text>
			</view>
			
		</view>
		<!-- 订单列表 -->
		<view class="order-list">
			<view class="list" v-for="(item,index) in datalist"  :key="index" v-if="datalist.length!=0">
				<view class="title-status">
					<view class="title">
						<text>下单时间：{{item.create_at}}</text>
					</view>
					<view class="status">
						<text>{{item.status_name}}</text>
						<!-- <text class="iconfont icon-laji del"></text> -->
					</view>
				</view>
				<view class="goods-list">
					<view class="goods" v-for="(its,ins) in item.order" :key="ins">
						<view class="thumb">
							<image :src="its.goods_cover" mode=""></image>
						</view>
						<view class="item">
							<view class="goods-name">
								<text class="two-omit">{{its.goods_name}}</text>
								<view class=" one-omit" style="margin-top: 10rpx;color: #999;">{{its.goods_spec}}</view>
							</view>
							<view class="" style="width: 30%;text-align: right;">
								<view class="price" v-if="item.goods_type!=3&&item.goods_type!=4">
									<text class="min">￥</text>
									<text class="max">{{its.price_selling}}</text>
								</view>
								<view class="price" v-if="item.goods_type==3">
									<text class="max">{{Math.trunc(its.price_selling)}}</text><text style="margin-left: 10rpx;font-size: 24rpx;">礼品卡</text>
								</view>
								<view class="price" v-if="item.goods_type==4">
									<text class="max" v-if="its.price_selling!=0">{{its.price_selling}}+</text><text class="max">{{Math.trunc(its.balance3)}}</text><text style="margin-left: 10rpx;font-size: 24rpx;">积分</text>
								</view>
								<view class="goods-num" style="margin-top: 6rpx;">
									<text class="min">x</text>
									<text class="max">{{its.stock_sales}}</text>
								</view>
							</view>
							
						</view>
					</view>
				</view>
				<view class="count" v-if="item.goods_type!=3&&item.goods_type!=4">
					总价：￥{{OrderType==1?item.amount_total:item.amount_real}}
				</view>
				<view class="count" v-if="item.goods_type==3">
					总价：{{Math.trunc(OrderType==1?item.amount_total:item.amount_real)}} <text style="font-size: 24rpx;margin-left: 6rpx;"> 礼品卡</text>
				</view>
				<view class="count" v-if="item.goods_type==4">
					总价：<text v-if="item.amount_real!=0">{{item.amount_real}}+</text>{{Math.trunc(item.balance3)}} <text style="font-size: 24rpx;margin-left: 6rpx;"> 积分</text>
				</view>
				<view class="status-btn">
					<view class="btn" v-if="item.status==1" @click="tui.dianji(getQuxiao(item.order_no,0))">
						<text>取消订单</text>
					</view>
					<view class="btn" v-if="item.status==1" @click="go_url('/pages/ConfirmOrder/ConfirmOrder?order_no='+item.order_no)">
						<text>去付款</text>
					</view>
					<view class="btn" v-if="item.status==2" @click="go_url('/pages/OrderDetails/tuikuan?order_no='+item.order_no)">
						<text>申请退款</text>
					</view>
					<view class="btn" v-if="item.status==3" @click="tui.dianji(getQuxiao(item.order_no,1))">
						<text>确认收货</text>
					</view>
					<view class="btn" v-if="item.status!=1" @click="go_url('/pages/OrderDetails/OrderDetails?order_no='+item.order_no)">
						<text>查看详情</text>
					</view>
				</view>
			</view>
			<view class="empty-box"  v-if="datalist.length==0">
				<image src="/static/ic_nodata.png" mode=""></image>
				<view class="">暂无数据</view>
			</view>
		</view>
		<tui-img :show="zhiboShow" @finish='endjie'></tui-img>
		<tui-modal :show="modal" @click="handleClick" @cancel="hide" :content="type==0?'确定取消订单吗？':'是否确定收货'" color="#333" :size="32"></tui-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				OrderType: 0,
				page:1,
				datalist:[],
				status:{'1':'待付款 ','2':'待配送','3':' 待提货','4':' 已提货','5':'售后服务'},
				modal:false,
				dataId:'',
				type:'',
				zhiboShow:false
			};
		},
		onLoad(params) {
			if(params.type){
				this.OrderType = params.type;
			}
		},
		onShow() {
			let that = this
			uni.$off('fcNotic');
			uni.$on('fcNotic', function(data) {
				that.zhiboShow = data
			});
			this.page=1
			this.datalist=[]
			this.getList()
			that.tui.zhiboList(1)
		},
		onReachBottom() {
			let that = this
			that.page++
			that.getList()
		},
		onUnload() {
			uni.$off('fcNotic');
		},
		methods:{
			/**
			 * 返回点击
			 */
			onBack(){
				uni.navigateBack();
			},
			endjie(e){
				this.zhiboShow = e
			},
			getList(){
				let that = this
				that.tui.request("api.auth.order/orderList", "post", {status:that.OrderType,page:that.page}, false,false, false).then((res) => {
					that.datalist =that.datalist.concat( res.data.list)
				}).catch((res) => {})
			},
			/**
			 * 订单tab点击
			 */
			onOrderTab(type){
				if(type==this.OrderType){
					return
				}
				this.OrderType = type;
				this.page=1
				this.datalist=[]
				this.getList()
			},
			/**
			 * 订单列表点击
			 */
			hide(){
				this.modal = false
			},
			go_url(e){
				this.tui.href(e)
			},
			getQuxiao(e,d){
				let that = this
				
				that.modal = true
				that.type=d
				that.dataId = e
			},
			handleClick(e){
				let that = this
				if(e.index==1){
					that.tui.request(that.type==0?'api.auth.order/cancel':"api.auth.live/user_nuc", "post", {order_no:that.dataId}, false,false, true).then((res) => {
						that.tui.toast(res.info)
						if(res.code==1){
							that.modal =false
							if(that.type==1){
								that.OrderType = 4
							}
							setTimeout(function(){
								that.page=1
								that.datalist=[]
								that.getList()
							},1000)
						}
					}).catch((res) => {})
				}else{
					that.hide()
				}
				
			},
      /**
       * 评价点击
       */
      onEvaluate(e){
			  uni.navigateTo({
          url: '/pages/MyEvaluatePush/MyEvaluatePush?item='+JSON.stringify(e)
        })
      }
		}
	}
</script>

<style scoped lang="scss">
	@import 'MyOrderList.scss';
</style>
